<template>
  <el-container class="login-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-header>
          <h1 style="font-size: 36px;text-align: center">四川瀚海精密制造有限公司</h1>
        </el-header>
        <el-form class="login-box" status-icon label-position="left" :model="loginForm" ref="loginForm"
                 :rules="rulesForm"
                 label-width="0px" data-title="登录">
          <el-form-item prop="username">
            <el-input type="text" v-model="loginForm.username"
                      prefix-icon="el-icon-user"
                      auto-complete="off" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password"
                      prefix-icon="el-icon-lock"
                      auto-complete="off" placeholder="密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaImg">
            <el-row :gutter="20">

              <el-col :span="16">
                <el-input type="text" v-model="loginForm.code"
                          auto-complete="off" placeholder="请输入验证码"
                          @keyup.enter.native="login('loginForm')"></el-input>
              </el-col>
              <el-col :span="8" @click="getCaptcha">
                <el-tooltip class="item" effect="dark" content="看不清？点击刷新" placement="right">
                  <img src="" v-bind:src="captchaImg" alt="" style="border-radius: 4px;cursor: pointer" @click="getCaptcha"
                       title="点击刷新">
                </el-tooltip>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item style="text-align: center;width: 100%">
            <el-button @click="login('loginForm')" style="width: 50%" :loading="loading">
              <span v-if="!loading">登录</span>
              <span v-if="loading">正在登录...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import qs from 'qs'

export default {
  name: "Login",
  data() {
    return {
      loading: false,
      captchaImg: null,
      loginForm: {
        username: '',
        password: '',
        code: "",
        token: '',
      },
      rulesForm: {

        username: [{
          required: true, message: "请输入账号...", trigger: 'blur'
        }],
        password: [
          {
            required: true, message: "请输入密码...", trigger: 'blur'
          }
        ],
      },
      menuList:[]
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    getCaptcha() {
      localStorage.removeItem("token")
      this.axios.get('../captcha').then(res => {
        if (res.data.success) {
          this.loginForm.token = res.data.data.token
          this.captchaImg = res.data.data.captchaImg
        } else {
        }
      })
    },
    login() {
      axios.post("../login?" + qs.stringify(this.loginForm)).then(res => {
        console.log(res)
        if (res.data.success) {
          console.log("登录：",res)
          this.$store.commit("setToken", res.data.data.token)
          this.$store.commit("setUserInfo", res.data.data.userInfo)
          this.$store.commit("setMenus",res.data.data.menus)
          this.$tools.showMessage(res.data.data.message, 'success')
          fdCommon.loadCodes();
          this.$router.push("/index")
          this.getUserList()
        } else {
          this.$tools.showMessage(res.data.message, 'error')
          this.loginForm.code=null
          this.getCaptcha()
        }
      })
    },
    getUserList() {
      axios.get("/fin_user_roster/list").then(res => {
        this.finUserRosterList = res.data.data
        this.$store.commit("setUserList",this.finUserRosterList)
        Object.freeze(this.finUserRosterList)
        this.$router.go(0)
      })
    },
  }
}
</script>

<style scoped lang="less">
.login-container {
  height: 100vh;
  background-size: cover;
  background: url("../assets/images/back.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;

  .el-header {
    margin: 3rem 0;

    h1 {
      font-size: 24px;
    }
  }

  .login-box {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 50px auto;
    align-self: center;
    padding: 35px 35px 15px 35px;
    background: rgba(0, 0, 0, .5);
    .el-form-item{
      margin-bottom: 2rem;
    }
  }
}


</style>
